<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--Array.prototype.unshift.利用定位和transform-->
<!--2.利用定位和margin-->
<style>
  .outer {
      position: absolute;
      left: 50%;
      top: 50%;
      /*通过translate调整元素的到中心 其中的百分比是以本身元素来算的  这里也可以用margin(但必须有已知高宽)*/
      transform: translate(-50%,-50%);
      height: 100px;
      width: 200px;
      background-color: #bbffaa;
  }
  .inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      /*由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中*/
      margin: auto;
      height: 100px;
      width: 200px;
      background-color: #bbffaa;
  }
</style>
<body>
<!--<div class="outer">-->
<!--</div>-->
<!--<div class="outer2">-->
<div class="inner"></div>
<!--</div>-->
</body>
</html>
